<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<style>
			body
			{
				background-image:linear-gradient(to right,#fbc2eb,#a6c1ee);
			}
			.box
			{
				width: 800px;
				height: 500px;
				margin: 200px auto;
				border-radius: 10px;
				background-color: white;
				box-shadow: 0 0 10px rgba(0, 0, 0, 1);
			}
			#test
			{
				width: 100%;
				height: 400px;
			}
			.image
			{
				width: 400px;
				height: 400px;
				border-bottom: 1px solid #EBEBEB;
				margin-top: 30px;
			}
			.Login
			{
				width: 400px;
				height: 400px;
				border-bottom: 1px solid #EBEBEB;
				margin-top: 30px;
				border-left: 1px solid #EBEBEB;
			}
			#img1
			{
				width: 300px;
				height: 70px;
				margin-left: 30px;
			}
			#img2
			{
				width: 200px;
				height: 200px;
				margin: auto;
				margin-left: 100px;
				margin-top: 5px;
				padding: 5px;
				border: 1px solid darkgray;
				border-radius: 10px;
			}
			.image p label
			{
				font-size: 20px;
				margin-left: 90px;
			}
			.image p a
			{
				text-decoration: none;
				background-color: #f0f0f0;
				color: #FFC0CB;
				padding: 7px;
				border-radius: 10px;
				margin-left: 135px;
			}
			.image p a img
			{
				width: 30px;
				height: 30px;
				position: relative;
				top: 10px;
			}
			.Login span
			{
				font-size: 1.5rem;
				font-weight: bold;
				margin-left: 1.875rem;
				border-bottom: 3px solid black;
				padding: 3px;
			}
			.Login label
			{
				font-size: 1.25rem ;
				color: #949494;
				margin-left: 2.5rem;
			}
			form
			{
				margin-top: 60px;
				margin-left: 30px;
			}
			input
			{
				width: 300px;
				height: 30px;
				padding: 5px 7px;
				border-radius: 8px;
				border: 1px solid darkgray;
				outline: none;
			}
			intput:focus
			{
				border: 1px solid #FFC0CB;
				box-shadow: 0 0 0 3px rgba(78, 110, 242, 2);
			}
			#password
			{
				color: #FFC0CB;
				text-decoration: none;
				margin-left: 250px;
			}
			button
			{
				width: 320px;
				height: 45px;
				background-color: #FFC0CB;
				border-radius: 8px;
				border: none;
				color: #ffffff;
				font-weight: bold;
				font-size: 15px;
			}
			button:hover
			{
				background-color: #FFC0CB;
			}
			#yy
			{
				font-size: 12px;
				margin-left: 60px;
				margin-top: 30px;
			}
			#ys
			{
				font-size: 12px;
				margin-left: 80px;
			}
			#ys a
			{
				text-decoration: none;
				color: #FFC0CB;
			}
			.bottom
			{
				width: 100%;
				height: 20px;
				margin-top: 20px;
			}
			#test
			{
				display: flex;
			}
			#img4
			{
				margin-left: 30px;
			}
			.bottom p a img
			{
				width: 30px;
				height: 30px;
				margin-left: 15px;
				margin-top: 15px;
			}
			#add
			{
				text-decoration: none;
				color: #FFC0CB;
				margin-left: 550px;
				position: relative;
				top: -10px;
			}
		</style>
	</head>
	<link rel="icon" href="E:/img/title.png">
	<body>
		<div class="box">
			<div id="test">
				<!-- 左侧登陆区域 -->
				<div class="image">
					<img src="E:/img/9926dc5e38503a81af9d3d99a6976aad.jpeg" alt="图片" id="img1">
					<p>
						<img src="E:/img/d286b9de532e9944d8e36cc7801018d3.png" id="img2">
					</p>
					<p>
						<label>请使用bilibiliAPP扫码登陆</label>
					</p>
					<p>
						<a href="https://app.bilibili.com/?spm_id_from=333.1007.0.0img src="E/img/e40401135ae3c34275ee82c92132a6ad.jpeg">下载bilibiliAPP</a>
					</p>
				</div>
				<!-- 右侧登陆区域 -->
				<div class="Login">
					<span> 短信登陆</span>
					<label><a href="new_file2.html" style="text-decoration: none;">账号登陆</a></label>
					<!-- from表单   action  与超链接的href -->
					<form action="success.html" method="get">
						<p><input type="text" placeholder="手机号"></p>
						<p><input type="password" placeholder="密码"></p>
						<p><a href="https://passport.bilibili.com/pc/passport/findPassword" id="password">忘记密码</a></p>
						<p><button type="submit"><a href="new_file5.html" style="text-decoration: none;">登录/注册</a></button></p>
					</form>
					<p id="yy">未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
					<p id="ys">登陆或完成注册代表你同意<a href="https://www.bilibili.com/protocal/licence.html">用户协议</a>和<a href="https://www.bilibili.com/blackboard/privacy-pc.html">隐私协议</a></p>
				</div>
			</div>
			<!-- 最下侧 -->
			<div class="bottom">
				<p>
					<a href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3Db42570a5f94eaee7b3e268ca556dd1fe%26sns_platform%3Dweibo%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=email###"><img src="E:/img/WB.png" id="img4"></a>
					<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D61b82c0d63632e258f029aa3e881da57%26sns_platform%3Dwechat%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect"><img src="E:/img/VX.png" ></a>
					<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D254d9ab86334ca1f2db45890c5d87a44%26sns_platform%3Dqq%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr"><img src="E:/img/QQ-circle-fill.png" ></a>
				</p>
			</div>
		</div>
	</body>
</html>